<template>
  <div class="zhifu">
     <!-- 导航栏 -->
     <van-nav-bar
        title="正在支付..."
        left-text="返回"
        left-arrow
        class="navbar"
        @click-left="onClickLeft"
      />
      <!-- 商品详情 -->
      <div class="shan">
        <div class="shang">
          <div>
            <img :src="imgBase + data.laptop_pic1" alt="">
          </div>
          <div>
            <div>{{data.title}}</div>
            <div>{{$store.state.gouma}}</div>
            <div>
              <div>￥ {{data.price}}</div>
              <div>x1</div>
            </div>
          </div>
        </div>
        <div class="gongji">
          共1件小计: <span>￥{{data.price}}</span>
        </div>        
      </div>

      <!-- 填写游客信息 -->
      <div class="tian">
        <div>填写游客信息</div>
        <div class="tianxie">
          <div>
            <span> <span class="xing">*</span> 游客姓名:</span>
            <input type="text" placeholder="请输入姓名" v-model="name">
          </div>
          <div>
            <span> <span class="xing">*</span> 手机号:</span>
            <input type="text" placeholder="请输入手机号" v-model="phone">
          </div>
          <div>
            <span> <span class="xing">*</span> 身份证:</span>
            <input type="text" placeholder="请输入身份证号" v-model="shenfen">
          </div>
        </div>        
      </div>

      <!-- 支付功能区 -->
      <div class="zhi">
        <div>
          <span>支付方式</span>
          <span>微信支付</span>
        </div>
        <hr>
        <div>
          <span>发票信息</span>
          <span>不开发票</span>
        </div>        
      </div>
      
      <!-- 价格详情 -->
      <div class='jia'>
        <div>
          <span>商品价格</span>
          <span>￥{{data.price}}</span>
        </div>
        <div>
          <span>数量</span>
          <span>x1</span>
         </div>
        <div>
          <span>日期</span>
          <span>
          </span>
        </div>
      </div>
      <!-- 底部导航栏 -->
      <van-submit-bar text-align="center" :price='data.price*100' button-text="提交订单" @submit="onSubmit" />
      
  </div>
</template>

<script>
import { mapState } from 'vuex'
  export default {
    data() {
      return {
        name:'',
        phone:'',
        shenfen:'',
        data:this.$route.params.id,
        date2:this.$route.params.date2
      }
    },
    computed: {
     ...mapState(['imgBase'])
    },
    methods: {
      onClickLeft() {
        this.$router.go(-1)
      },

      onSubmit(){
        this.axios.post("/ddAdd",`lid=${this.data.lid}&&price=${this.data.price}&&name=${this.name}&&ordeail_id=1&&phone=${this.phone}&&uname=${this.$store.state.username}&&yhsf=${this.shenfen}&&datetime=${this.$route.params.date2}`
            ).then((res) => { 
              console.log(res);
              if (res.data.code == 200) {
                this.$toast({
                  message: "购买成功",
                  icon: "smile-o",
                });
                this.$router.push('/')
              }
            });
      }
    },
  }
</script>

<style scoped src='../../src/assets/css/zhifu.css'></style>